@codemirror/state

What is @codemirror/state?

The @codemirror/state package is part of the CodeMirror (version 6) ecosystem, which provides a flexible, extensible text editor. This particular package is responsible for managing the state of the editor, including the document content, selection, and any other state that plugins might add. It allows for the creation, modification, and querying of editor state, facilitating complex text editing features.

What are @codemirror/state's main functionalities?

Creating an Editor State

This feature allows for the initialization of an editor state with a starting document. The document can be a string or a more complex structure for representing text.

{
  import {EditorState} from '@codemirror/state';
  const state = EditorState.create({doc: 'Hello, world!'});
}

Updating the State

This demonstrates how to update the state by creating a transaction. In this example, the text 'Hello' is replaced with 'Goodbye'. Transactions can include changes to the document, selections, and other state aspects.

{
  import {EditorState, Transaction} from '@codemirror/state';
  let newState = state.update({changes: {from: 0, to: 5, insert: 'Goodbye'}}).state;
}

Reading the State

This feature is about accessing the current content of the editor. It shows how to convert the document in the state to a string, which can be useful for saving the content or displaying it elsewhere.

{
  import {EditorState} from '@codemirror/state';
  const content = state.doc.toString();
}

Other packages similar to @codemirror/state

monaco-editor

The Monaco Editor is the code editor that powers VS Code, offering rich IntelliSense, validation, and advanced editing features. Compared to @codemirror/state, Monaco is a more comprehensive solution that includes its own state management but is heavier and less modular.

ace-builds

Ace is another embeddable code editor offering a wide range of features and language support. While it also manages editor state and provides similar functionality, it is designed as a monolithic package, making it less flexible than the modular approach of CodeMirror.

draft-js

Draft.js is a framework for building rich text editors in React, focusing on immutable content and state management. It differs from @codemirror/state by being React-specific and focusing more on rich text editing rather than code editing, but it shares the concept of managing editor state in a comprehensive way.

README

@codemirror/state

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements the editor state data structures for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

6.5.0 (2024-12-09)

New features

RangeSet.compare now supports a boundChange callback that is called when there's a change in the way ranges are split.